<template>
  <el-dialog :title="'导入' + title" :visible.sync="option.show" width="620px">
    <el-form ref="importForm" :model="importForm" label-position="left" label-width="92px" style="margin-left:10px;">
      <el-form-item label prop="fileName" :rules="fileRule" label-width="0">
        <el-upload dragle action="/" accept=".xls, .xlsx" :auto-upload="false" :show-file-list="false" :file-list="fileList" :on-change="importFile">
          <div class="fileDiv">
            <span v-if="importForm.fileName" style="margin-right:5px">{{ importForm.fileName }}</span>
            <el-button type="text">{{ fileList.length === 0 ? '点击上传' : '重新上传' }}</el-button>
          </div>
        </el-upload>
      </el-form-item>
      <div style="height:20px" class="clearfix">
        <el-link type="text" style="float:right;margin-top:-15px" @click="downloadTemplate">下载模板</el-link>
      </div>
      <el-form-item label="工作表名称" prop="sheetName" :rules="nameRule">
        <el-input v-model="importForm.sheetName" size="small" placeholder="工作表名称" />
      </el-form-item>
      <el-form-item label="数据起始行" prop="headRowNumber" :rules="numberRule">
        <el-input v-model.number="importForm.headRowNumber" size="small" placeholder="数据起始行" oninput="value=value.replace(/[^\d]/g,'')" />
      </el-form-item>
      <el-form-item label="异常处理" prop="terminateWhenInvalid" :rules="[{ required: true }]" style="margin-right:20px" class="noInput">
        <el-radio-group v-model="importForm.terminateWhenInvalid" size="small">
          <el-radio :label="0" style="margin-right:3px">忽略存在错误</el-radio>
          <el-radio :label="1" style="margin-right:3px">出错时放弃导入</el-radio>
          <el-radio :label="2">出错时停止导入，已导入数据失效</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer" align="center">
      <el-button size="small" @click="option.show = false">取消</el-button>
      <el-button type="primary" size="small" @click="handleImport()">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { importData } from '@/api/user'
export default {
  name: 'ImportData',
  props: {
    title: {
      required: true,
      type: String
    },
    type: {
      required: true,
      type: String
    }
  },
  data() {
    return {
      option: {
        show: false
      },
      importForm: {
        fileName: '',
        sheetName: '',
        headRowNumber: 2,
        terminateWhenInvalid: 1
      },
      fileRule: [
        { required: true, message: '请选择要导入的文件！', trigger: 'change' }
      ],
      nameRule: [
        { required: true, message: '请输入工作表名称！', trigger: 'blur' }
      ],
      numberRule: [
        { required: true, message: '请输入数据起始行！', trigger: 'blur' }
      ],
      file: null,
      fileList: [],
      formData: null
    }
  },
  watch: {
    'option.show'(val) {
      if (val) {
        this.showImport()
      }
    }
  },
  methods: {
    downloadTemplate() {
      location.href = 'business/' + this.type + '.xlsx'
    },
    showImport() {
      this.importForm.fileName = ''
      this.importForm.sheetName = this.title
      this.importForm.headRowNumber = 2
      this.importForm.isAutoMnemonicCode = 1
      this.importForm.terminateWhenInvalid = 1
      this.fileList = []
    },
    importFile(file, fileList) {
      if (fileList.length > 0) {
        this.fileList = [fileList[fileList.length - 1]]
      }
      this.file = file.raw
      this.importForm.fileName = file.name
      this.$refs.importForm.validateField('fileName')
    },
    handleImport() {
      this.$refs.importForm.validate((valid) => {
        if (valid) {
          var formData = new FormData()
          formData.append('file', this.file)
          formData.append('terminateWhenInvalid', this.importForm.terminateWhenInvalid)
          formData.append('isAutoMnemonicCode', this.importForm.isAutoMnemonicCode)
          formData.append('headRowNumber', this.importForm.headRowNumber)
          formData.append('sheetName', this.importForm.sheetName)
          formData.append('fileName', this.importForm.fileName)
          importData(this.type, formData).then((res) => {
            if (res.data.errorCode === '0') {
              this.$message.success(res.data.msg)
              this.option.show = false
              this.refreshData()
              this.$parent.getList()
            }
          })
        }
      })
    },
    refreshData() {
      if (this.type === 'cust') {
        this.$parent.getTree()
      }
      if (this.type === 'channelType' || this.type === 'invCatg' || this.type === 'dept' || this.type === 'custType') {
        this.$parent.getLeftTree()
      }
    }
  }
}
</script>
<style scoped>
.fileDiv {
  width: 570px;
  height: 60px;
  border: 1px #d0d0d0 solid;
  line-height: 60px;
  text-align: center;
  border-radius: 6px;
}
.filter-item {
  position: relative;
}
</style>
